<template>
  <div>
    <!-- 左对齐 -->
    <van-row type="flex" justify="center"  class="box">
      <van-col
        span="6"
        v-for="(item, index, id) in musicList"
        :key="id"
        v-show="index > 4"
        @click="toDetail(item.id)"
      >
        <span>
          <van-image
            width="80"
            height="80"
            lazy-load
            :src="item.coverImgUrl + '?param=120y120'"
          />
        </span>
        <span class="van-ellipsis">{{ item.name }}</span>
      </van-col>
      <MyBg1 class="bg" />
    </van-row>
  </div>
</template>

<script>
import MyBg1 from "@/components/rankings/MyBg1";
export default {
  name: "MusicWorldRank",
  props: ["musicList"],

  data() {
    return {};
  },
  components: { MyBg1 },
  mounted() {},

  methods: {
    toDetail(id) {
      this.$router.push({
        path: "/MusicDetail",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bg{position: fixed;
left: 50%;
z-index: -1;
transform: translate(-50%,-50%);
top:50%}
.box {
  .van-col {
    display: flex;
    flex-direction: column;
    padding: 0.3125rem;
  }
}
</style>